<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <style type="text/css">
			li{ 
				height:30px;
				line-height:30px;
				list-style:none;
			}
			.curr{ background:#897823 !important;}
        </style>
        <script type="text/javascript">
        	window.onload = function(){
        		var lis = document.getElementsByTagName("li");
        		//alert(lis.length)
        		for(var i=0; i<=lis.length; i++){

        			if(i % 2 == 0){
        				lis[i].style.background = "#ccc"
        			}else{
        				lis[i].style.background = "#333"
        			}
        			lis[i].onmouseover = function(){
        				this.className="curr"
        			}
        			lis[i].onmouseout = function(){
        				this.className=""
        			}
        		}

        	}
        </script>
    </head>
    <body>
    	<div class="box" id="box">
    		<ul>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    			<li>wenzi</li>
    		</ul>
    	</div>
    </body>
</html>